<template>
	<scroll-view scroll-y="true" class="main" v-if="info">
		<view class="header">
			<view class="box1">
				<view class="box2" v-if="info.status == 0">
					<text class="status" >待付款</text>
					<text>请及时付款</text>
				</view>
				<view class="box2" v-if="info.status == -1">
					<text class="status" >已取消</text>
					<text>点击再次购买</text>
				</view>
				<view class="box2" v-else-if="info.status == 1 && info.isaccept === 0">
					<text class="status" >待接单</text>
					<text>等待所选的技师接单</text>
				</view>
				<view class="box2" v-else-if="(info.status == 1 ) && info.isaccept === 1">
					<text class="status" >已接单</text>
					<text>技师已接单，请耐心等待技师到来</text>
				</view>
				<view class="box2" v-else-if="(info.status == 2 ) && info.isaccept === 1">
					<text class="status" >已出发</text>
					<text>技师已出发，正在赶往您的地址</text>
				</view>
				<view class="box2" v-else-if="(info.status == 3 ) && info.isaccept === 1">
					<text class="status" >已到达</text>
					<text>技师已到达您指定的服务地址</text>
				</view>
				<view class="box2" v-else-if="(info.status == 4 ) && info.isaccept === 1">
					<text class="status" >服务中</text>
					<text>使用加钟功能可以增加服务时常</text>
				</view>
				<view class="box2" v-else-if="(info.status == 5 || info.status == 6 ) && info.isaccept === 1">
					<text class="status" >已完成</text>
					<text>服务完成，如果需要可以再次购买</text>
				</view>
			</view>
			<view class="jindu_box">
				<u-steps :current=step dot activeColor='#00CE9B'>
					<u-steps-item  title="已接单"></u-steps-item>
					<u-steps-item  title="已出发"></u-steps-item>
					<u-steps-item title="已到达"></u-steps-item>
					<u-steps-item title="服务中"></u-steps-item>
					<u-steps-item title="已完成"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="item">
			<image class="fengmian" :src="$oss(info.cateinfo.image)" mode=""></image>
			<view class="right">
				<view class="name">{{info.cateinfo.name}}</view>
				<view class="gongneng">
					<view class="">{{info.cateinfo.intro}}</view>
				</view>
				<view class="price">
					<view class="money">
						<text>¥</text>
						<text>{{info.cateinfo.price}}</text>
					</view>
					<!-- <view class="vipPrice">
						<text>¥ 198</text>
					</view> -->
					<!-- <view class="reservation_btn">x <text class="num">1</text> </view> -->
				</view>
				<view class="naozhong">
					<image src="/static/naozhong.png" mode="widthFix"></image>
					<text>{{info.cateinfo.costmin}}分钟</text>
				</view>
			</view>
		</view>
		<view class="fwjs_box">
			<text class="label">服务技师</text>
			<view class="r">
				<image :src="$oss(info.work_image)" mode=""></image>
				<text>{{info.orderdetail.servicename}}</text>
			</view>
		</view>
		<view class="fwxm_box">
			<view class="title">服务项目</view>
			<view class="line line1 flex">
				<view class="l">
					<view class="name">{{info.catename}}</view>
					<view class="time u-m-t-10">时长：{{info.orderdetail.costmin}}分钟 X{{info.num}}</view>
				</view>
				<view class="val red">¥{{info.price * info.num}}</view>
			</view>
			<template v-for="(item,index) of info.bellorder">
				<view class="line line1 flex">
					<view class="l">
						<view class="name">{{item.catename}}</view>
						<view class="time u-m-t-10">时长：{{item.costmin}}分钟 X{{item.num}}</view>
					</view>
					<view class="val red">¥{{item.price * item.num}}</view>
				</view>
			</template>
			
			<view class="line">
				<view class="l">
					<view class="name">出行方式</view>
				</view>
				<view class="val" v-if="info.traveltype == 0">滴滴/出租</view>
				<view class="val" v-else>公交/地铁</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">出行费用</view>
				</view>
				<view class="val red" v-if="info.is_free == 1">免费</view>
				<view class="val red" v-else>¥{{info.travelprice}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">优惠券抵扣</view>
				</view>
				<view class="val">- ¥{{info.couponprice}}</view>
			</view>
			<view class="total_box">
				<text class="he">合计</text>
				<view class="m">
					<text class="fuhao">¥</text>
					<text class="money">{{info.payprice}}</text>
				</view>
			</view>
		</view>
		<view class="fwxm_box">
			<view class="title">服务信息</view>
			<view class="line">
				<view class="l">
					<view class="name">联系人</view>
				</view>
				<view class="val">{{info.orderdetail.name}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">联系电话</view>
				</view>
				<view class="val">{{info.orderdetail.mobile}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">服务时间</view>
				</view>
				<view class="val">{{info.orderdetail.starttime | date('yyyy-mm-dd hh:MM')}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name" style="min-width: 150rpx;">服务地址</view>
				</view>
				<view class="val">{{info.orderdetail.area}}{{info.orderdetail.address}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">备注</view>
				</view>
				<view class="val">{{info.note || ''}}</view>
			</view>
		</view>
		<view class="fwxm_box">
			<view class="title">订单信息</view>
			<view class="line">
				<view class="l">
					<view class="name">订单编号</view>
				</view>
				<view class="val">{{info.orderId}}</view>
			</view>
			<view class="line">
				<view class="l">
					<view class="name">下单时间</view>
				</view>
				<view class="val">{{info.paytime | date('yyyy-mm-dd hh:MM')}}</view>
			</view>
		</view>
		<view class="" style="width: 100vw; height: 200rpx;">

		</view>
		<view class="bottom flex"  v-if="info.status === 4">
			<view class="level flex" @click="upServe">
				<image src="/static/level.png" mode=""></image>
				服务升级
			</view>
			<view class="levels flex" @click="addServe">
				我要加钟
			</view>
		</view>
		<view class="bottom flex" v-if="info.status == 0">
			<view class="comment cancel flex" @click="cancelpay">
				取消订单
			</view>
			<view class="levelss flex" @click="pay">
				立即付款
			</view>
		</view>
		<view class="bottom flex" v-if="info.status === 5 || info.status === 6 || info.status === -1">
			<view class="comment flex" @click="comment" v-if="info.status === 5">
				评价
			</view>
			<view class="levelss flex" @click="again" v-if="info.status === 5 || info.status === -1">
				再次购买
			</view>
		</view>
		
	</scroll-view>
</template>

<script>
	import bottomBtn from '@/components/bottom_btn/bottom_btn.vue'

	export default {
		components: {
			bottomBtn
		},
		data() {
			return {
				current: 2,
				id: '',
				info: '',
				list: [],
				upShow: false
			}

		},
		computed: {
			step() {
				if(this.info.isaccept === 0){
					return -1
				}else if(this.info.isaccept === 1 && this.info.status === 1){
					return 0
				}else if(this.info.isaccept === 1 && this.info.status === 2){
					return 1
				}else if(this.info.isaccept === 1 && this.info.status === 3){
					return 2
				}else if(this.info.isaccept === 1 && this.info.status === 4){
					return 3
				}else if(this.info.isaccept === 1 && (this.info.status === 5 || this.info.status === 6)){
					return 4
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
			
		},
		methods: {
			addServe(){
				this.$goTo('/pages_order/orderadd/orderadd?cate='+encodeURIComponent(JSON.stringify(this.info.cateinfo))+'&service_id='+this.info.service_id+'&id='+this.info.id+'&num='+this.info.num)
			},
			upServe(){
				this.$goTo('/pages_order/orderlevel/orderlevel?cate='+encodeURIComponent(JSON.stringify(this.info.cateinfo))+'&service_id='+this.info.service_id+'&id='+this.info.id+'&num='+this.info.num)
			},
			again(){
				this.$goTo('/pages/reservation/reservation?cate_id='+this.info.cate_id+'&id='+this.info.service_id)
			},
			comment(){
				this.$goTo('/pages_order/serviceEvaluation/serviceEvaluation?id='+this.info.id+'&name='+this.info.orderdetail.servicename+'&avatar='+this.info.work_image)
			},
			pay(){
				let that = this
				this.$api.post('/pay', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						that.$pay(res.data).then(res => {
							
						})
					}
				}).catch((res) => {
				
				})
			},
			cancelpay(){
				this.$pai.post('/cancelpay', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg)
						this.getInfo()
					}
				}).catch((res) => {
				
				})
			},
			getInfo() {
				this.$api.post('/orderinfo', {
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						
					}
				}).catch((res) => {

				})
			},
			confirm() {
				uni.navigateTo({
					url: '/pages_order/serviceEvaluation/serviceEvaluation'
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7fa;
		
	}
	.main{
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		overflow: hidden;
	
	}

	.header {
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;

		.box1 {
			display: flex;
			justify-content: space-between;

			.print {
				width: 131rpx;
				height: 111rpx;
			}

			.box2 {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #8d93a5;

				.status {
					font-size: 48rpx;
					color: #00ce9b;
					font-weight: bold;
					margin-bottom: 12rpx;
				}
			}
		}

		.jindu_box {
			.green {
				color: $uni-primary !important;
			}

			margin-top: 40rpx;

			.jindu {
				position: relative;
				display: flex;
				align-items: center;

				.jindutiao {
					width: 686rpx;
					height: 12rpx;
					background: #f6f7fb;
					border-radius: 31rpx;
					margin: 0 auto;
				}

				.now {
					width: 12rpx;
					height: 12rpx;
					background: #ffffff;
					border: 6rpx solid #00ce9b;
					border-radius: 50%;
					position: absolute;
					left: 0;
				}
			}

			.names {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #8d93a5;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.item {
		width: 686rpx;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		margin: 30rpx auto 0;
		position: relative;

		.fengmian {
			width: 194rpx;
			height: 160rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}

		.right {
			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #1c274c;
			}

			.gongneng {
				display: flex;
				align-items: center;
				margin: 15rpx 0 20rpx;

				view {
					padding: 0 10rpx;
					height: 40rpx;
					border-radius: 10rpx;
					opacity: 0.4;
					border: 1rpx solid #8d93a5;
					font-size: 20rpx;
					color: #1c274c;
					line-height: 40rpx;
					text-align: center;
					margin-right: 10rpx;
					display: -webkit-box; /* 将容器作为弹性盒子 */
					-webkit-box-orient: vertical; /* 垂直排列盒子内容 */
					-webkit-line-clamp: 1; /* 设置最大行数为1行 */
					overflow: hidden; /* 隐藏溢出的内容 */
					text-overflow: ellipsis; /* 使用省略号代替溢出的内容 */
				}
			}

			.price {
				display: flex;
				align-items: center;
				width: 400rpx;
				position: relative;

				.money {
					margin-right: 15rpx;

					text:first-child {
						font-size: 24rpx;
						color: $uni-info;
					}

					text:last-child {
						font-size: 28rpx;
						color: $uni-info;
						font-weight: 600;
					}
				}

				.vipPrice {
					width: 127rpx;
					height: 35rpx;
					background: url(/static/vipBg.png) no-repeat;
					background-size: contain;
					font-size: 22rpx;
					font-weight: 900;
					color: #292439;
					position: relative;
					margin-right: 50rpx;

					text {
						line-height: 35rpx;
						position: absolute;
						right: 10rpx;
					}
				}

				.reservation_btn {
					font-size: 22rpx;
					position: absolute;
					right: 0;
					color: #333333;

					.num {
						font-size: 32rpx;
					}
				}
			}

			.naozhong {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #00ce9b;
				width: 142rpx;
				height: 52rpx;
				background: rgba(0, 206, 155, 0.1);
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				position: absolute;
				right: 0;
				top: 30rpx;

				image {
					width: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.fwjs_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 686rpx;
		height: 114rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin: 30rpx auto 0;

		.label {
			font-size: 28rpx;
			color: #3D4666;
		}

		.r {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #1C274C;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
		}
	}

	.fwxm_box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
		padding: 32rpx;
		box-sizing: border-box;

		.title {
			font-size: 30rpx;
			color: #1C274C;
			font-weight: bold;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #EBEBEB;
		}

		.line {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			justify-content: space-between;

			.val {
				font-size: 28rpx;
				font-weight: bold;
				color: #1C274C;
				// width: 366rpx;
			}

			.red {
				color: $uni-info;
			}

			.name {
				font-size: 28rpx;
				color: #8D93A5;
			}
		}

		.line1 {
			justify-content: space-between;

			.l {
				.name {
					font-size: 28rpx;
					color: #1C274C;
					font-weight: bold;
				}

				.time {
					font-size: 24rpx;
					color: #8D93A5;
				}
			}
		}

		.total_box {
			display: flex;
			align-items: baseline;
			justify-content: flex-end;
			padding-top: 8rpx;
			margin-top: 20rpx;
			box-sizing: border-box;
			border-top: 1rpx solid #EBEBEB;

			.he {
				font-size: 24rpx;
				color: #1C274C;
				margin-right: 15rpx;
			}

			.m {
				color: $uni-info;

				.fuhao {
					font-size: 24rpx;
				}

				.money {
					font-size: 44rpx;
					font-weight: bold;
				}
			}
		}
	}

	.bottom {
		width: 750rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		color: #fff;
		justify-content: space-around;

		.level {
			margin-top: 50rpx;
			border-radius: 40rpx;
			line-height: 96rpx;
			height: 96rpx;
			width: 45%;
			justify-content: center;
			background: #5A6CD5;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
		}

		.levels {
			margin-top: 50rpx;
			border-radius: 40rpx;
			line-height: 96rpx;
			height: 96rpx;
			width: 45%;
			justify-content: center;
			background: $uni-primary;
			align-items: center;
		}

		.comment {
			margin-top: 50rpx;
			border-radius: 40rpx;
			line-height: 96rpx;
			height: 96rpx;
			width: 30%;
			justify-content: center;
			background: #FE6051;
			align-items: center;
		}
		.cancel{
			background: #999;
		}

		.levelss {
			margin-top: 50rpx;
			border-radius: 40rpx;
			line-height: 96rpx;
			height: 96rpx;
			width: 65%;
			justify-content: center;
			background: $uni-primary;
			align-items: center;
		}
	}
</style>